<template>
  <div>
    <!-- 题型--标签 -->
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple">【题型】：{{ questionTypeFn }}</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          【编号】：{{ subjectDetail.id }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">【难度】：{{ difficultyFn }}</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          【标签】:<span v-html="subjectDetail.tags"></span
      >
        </div>
      </el-col>
    </el-row>
    <!-- 学科--方向 -->
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          【学科】：{{ subjectDetail.subjectName }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          【目录】：{{ subjectDetail.directoryName }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          【方向】：{{ subjectDetail.direction }}
        </div>
      </el-col>
    </el-row>

    <hr />

    <!-- 题干 -->
    【题干】:<span v-html="subjectDetail.question" class="text"> </span>
    <!-- 单选项 -->
    <div v-if="subjectDetail.questionType === '1'">
      <p>单选题 选项:(以下选中的选项为正确答案)</p>
      <div
        v-for="obj in questionDetail.options"
        :key="obj.id"
        class="checkRadio"
      >
        <el-radio v-model="isRight" :label="obj.isRight"
          >{{ obj.code }} : {{ obj.title }}
        </el-radio>
      </div>

    </div>

    <!-- 多选题 -->
    <div v-else-if="subjectDetail.questionType === '2'">
      <p>多选题 选项:(以下选中的选项为正确答案)</p>
      <div
        v-for="obj in questionDetail.options"
        :key="obj.id"
        class="checkRadio"
      >
        <el-checkbox-group v-model="checkList">
          <el-checkbox :label="obj.isRight" @change="checkList = [1]"
            >{{ obj.code }} : {{ obj.title }}
          </el-checkbox>
        </el-checkbox-group>
      </div>

    </div>

    <hr />

    <!-- 参考答案 -->
    <div>
      【参考答案】:
      <el-button type="danger" @click="videoShow">视频答案预览</el-button>
      <div>
        <video
          :src="subjectDetail.videoURL"
          style="width: 400px"
          autoplay
          v-if="videoIsShow"
        ></video>
      </div>
    </div>
    <hr />

    <!-- 答案解析 -->
    【答案解析】:
    <div v-html="subjectDetail.answer" class="dajx"></div>
    <hr />

    <!-- 题目备注 -->
    <div class="beizhu">【题目备注】: {{ subjectDetail.remarks }}</div>

    <!-- 关闭 -->
    <el-button type="primary" @click="closeQuestionsDialog">关闭</el-button>
  </div>
</template>

<script>
// 导入 类型,难度 枚举数据
import { questionType, difficulty } from '@/api/hmmm/constants.js'
// 导入 基础题库详情 接口API
import { detail as questionDetail } from '@/api/hmmm/questions.js'
export default {
  name: 'QuestionsPreview',
  props: {
    subjectDetail: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      questionDetail: {}, // 当前题库详情
      videoIsShow: false, // 控制视频显示与隐藏
      isRight: 1, // 单选框默认选中
      checkList: [1], // 复选框默认选中
      thisQuestionType: '', // 题型
      thisDifficulty: '' // 难度
    }
  },
  created () {
    // 调用 获取 基础题库详情 方法
    // this.getQuestionDetail()
    // 调用 格式化题型 方法
    // this.questionTypeFn()
    // 调用 格式化题型 方法
    // this.difficultyFn()
  },
  methods: {
    // 点击弹窗关闭按钮, 关闭弹窗 || 子传父
    closeQuestionsDialog () {
      this.$emit('closeDialog')

      // 隐藏 视频答案解析
      this.videoIsShow = false
    },
    // 获取 基础题库详情 方法 || 格式化题型,难度
    async getQuestionDetail () {
      // 调用 基础题库详情 接口API
      const res = await questionDetail(this.subjectDetail)
      console.log(res)

      // 赋值 当前题库详情
      this.questionDetail = res.data

      // 格式化题型
      this.questionDetail.questionType = questionType.find(
        (item) => item.value === this.questionDetail.questionType * 1
      ).label

      // 格式化难度
      this.questionDetail.difficulty = difficulty.find(
        (item) => item.value === this.questionDetail.difficulty * 1
      ).label
    },
    // 点击显示 视频答案预览
    videoShow () {
      this.videoIsShow = true
    }
  },
  computed: {
    // 格式化题型 方法
    questionTypeFn () {
      const res = questionType.find(
        (item) => item.value === this.subjectDetail.questionType * 1
      )
      //   this.thisQuestionType = res.label
      return res ? res.label : ''
    },

    // 格式化难度 方法
    difficultyFn () {
      const res = difficulty.find(
        (item) => item.value === this.subjectDetail.difficulty * 1
      )
      //   this.thisDifficulty = res.label
      return res ? res.label : ''
    }
  }
}
</script>

<style scoped>
.dajx {
  display: inline-block;
}
.text {
  color: blue;
}
.el-row {
  padding-bottom: 20px;
}

button.el-button.el-button--primary.el-button--medium {
  position: absolute;
  bottom: 20px;
  right: 20px;
  /* margin-top: 50px; */
}

.beizhu {
  margin-bottom: 50px;
}

.checkRadio {
  margin-bottom: 5px;
}
</style>
